<template>
  <yt-page title="视频列表">
    <yt-group ref="group" :searchApi="searchApi" :group="false">
      <div @click="onDetail(video)" slot-scope="video" class="video-item">
        <img :src="require('./img/zanting.png')">
        <span>{{video.DeviceName}}</span>
      </div>
    </yt-group>
  </yt-page>
</template>

<script>
import { commonApi } from '@/common/api/commonApi.js'
import { bridge } from '@/common/plugin/utils/bridge'
export default {
  data() {
    return {
      searchApi: async ({ skip, limit }) => {
        let items = commonApi.search('measure_video', {
          equalTo: { gridId: this.$route.query.gridId },
          skip,
          limit
        })
        // 摄像头型号不一致，地址需要转换
        items.map(v => {
          v.DeviceNum
            ? (v.AddressIP = `http://218.92.104.98:8388/mag/hls/${
                v.DeviceNum
              }/0/live.m3u8`)
            : ''
        })
        return items
      }
    }
  },
  methods: {
    onDetail(video) {
      bridge.Play(video.AddressIP)
    }
  }
}
</script>

<style scoped lang="stylus">
>>>.video-item
  width 50%
  text-align center
  padding 10px
  box-sizing border-box
  line-height 30px
  display inline-block

  img
    max-width 100%
</style>
